<template>
	<view class="agreement-container">
		<!-- 顶部标题栏 -->
		<!-- 		<view class="agreement-header">
			 <image src="/static/logo.png" class="logo" />
			<text class="title">螃蟹旅途钱包用户协议</text>
		</view> -->

		<!-- 协议内容 -->
		<view scroll-y class="agreement-content">
			<rich-text :nodes="agreementContent"></rich-text>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreed: false,
				agreementContent: `
<div style="font-size: 28rpx; color: #333; line-height: 1.6;">
  <h3 style="text-align: center; margin-bottom: 30rpx; font-size: 32rpx; color: #ff8c00;">隐私保护协议</h3>

  <p>感谢您使用<strong style="color: #ff8c00;">螃蟹旅途钱包</strong>！我们非常重视您的隐私保护和个人信息安全。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">一、信息收集</h3>
  <p>为了向您提供更好的服务，我们会收集如下信息：</p>
  <ul style="padding-left: 40rpx; margin-bottom: 20rpx;">
    <li>账号信息（手机号、微信信息）</li>
    <li>设备信息（设备型号、操作系统版本、设备标识符）</li>
    <li>位置信息（用于定位附近服务）</li>
    <li>使用信息（操作日志、点击行为）</li>
    <li>支付信息（交易记录、消费金额）</li>
  </ul>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">二、信息使用</h3>
  <p>我们收集的信息将用于以下目的：</p>
  <ul style="padding-left: 40rpx; margin-bottom: 20rpx;">
    <li>提供核心功能，如账户管理、支付结算</li>
    <li>优化用户体验，改进产品服务</li>
    <li>保障交易及账户安全</li>
    <li>向您推送与您相关的服务或优惠信息</li>
    <li>符合法律法规及监管要求</li>
  </ul>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">三、信息共享</h3>
  <p>我们不会向任何第三方转让或出售您的个人信息，但以下情形除外：</p>
  <ul style="padding-left: 40rpx; margin-bottom: 20rpx;">
    <li>获得您的明确同意</li>
    <li>为实现核心功能所必须</li>
    <li>为履行法律法规规定的义务</li>
    <li>应司法机关或政府部门要求</li>
  </ul>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">四、信息存储</h3>
  <p>我们会将您的个人信息存储在中华人民共和国境内，并采取合理的安全保护措施防止信息泄露、损毁或丢失。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">五、您的权利</h3>
  <p>您有权随时访问、更正或删除您的个人信息，并有权撤回同意或注销账户。</p>

  <h3 style="margin: 40rpx 0 20rpx; font-size: 30rpx; color: #ff8c00;">六、联系我们</h3>
  <p>如您对本隐私协议有任何疑问，请通过以下方式联系我们：</p>
  <p>客服邮箱：privacy@pangxielvtu.com</p>
  <p>客服电话：400-888-9999</p>
  <p>服务时间：9:00-18:00（工作日）</p>

  <p style="margin-top: 40rpx; text-align: center; font-weight: bold; color: #ff8c00;">
    螃蟹旅途钱包（广州）科技有限公司<br>
    2025年6月
  </p>
</div>

      `
			};
		},
		methods: {
			navigateToPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				});
			}
		}
	};
</script>

<style lang="scss">
	.agreement-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	.agreement-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0 20rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.logo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.agreement-content {
		box-sizing: border-box;
		flex: 1;
		padding: 0 30rpx;
		background-color: #f9f9f9;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: 50rpx;
		// margin: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05) inset;
	}

	.agreement-footer {
		padding: 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;

		.checkbox-container {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.agree-text {
				font-size: 28rpx;
				color: #666;
				margin-left: 15rpx;
			}
		}

		.agree-btn {
			background: linear-gradient(135deg, #ff8c00, #ff6b00);
			color: white;
			border-radius: 50rpx;
			font-size: 32rpx;
			height: 90rpx;
			line-height: 90rpx;
			box-shadow: 0 6rpx 20rpx rgba(255, 140, 0, 0.3);

			&.disabled {
				background: #ccc;
				box-shadow: none;
			}
		}
	}
</style>